<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 600px;
				height: 120px;
				border: 1px solid black;
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-around;
				align-items: center;
			}
			
			.day{
				width: 100px;
				height: 100px;
				padding-left: 40px;
				border: 1px solid black;
				display: flex;
				align-items: center;
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="day"></div>
			<div class="day"></div>
			<div class="day"></div>
			<div class="day"></div>
			<div class="day"></div>
		</div>
		
		<script type="text/javascript">
			var dao =document.getElementsByClassName("day");
			var newtime = new Date("2021-2-11 00:00:00");
			
			console.log(newtime);
			
			var countTime = setInterval(function(){
				var localtime = new Date();
				console.log(localtime);
				
				var times = newtime - localtime;
				console.log("times:",times);
				
				var haomiao = (times%1000);
				var second = parseInt(times/1000);
				var sescth = (second%60);
				var min  = parseInt((second/60))%60;
				
				console.log("haomiao:",haomiao);
				console.log("second:",second);
				console.log("sescth:",sescth);
				console.log("min:",min);
			
			
				var hour = parseInt((second/3600))%24;
				var days = parseInt((second/86400))%365;
				   
				console.log("hour:",hour);
				console.log("days:",days);
				
				
				dao[0].innerHTML = days + "天";
				dao[1].innerHTML = hour + "时";
				dao[2].innerHTML = min + "分";
				dao[3].innerHTML = sescth + "秒";
				
				var res = "";
				if (haomiao<10) {
					res ="00" + haomiao;
				} else if (haomiao>=10 && haomiao <100){
					res = "0" + haomiao;
				} else {
					res = haomiao;
				}
				
				console.log("res:",res);
				dao[4].innerHTML = res + "毫秒";
			},1)
			
			
			
		</script>
		
	</body>
</html>
